<template>
	<view class="repair-wrap">
		<view class="repair-box  u-p-l-30 u-p-r-30" style="margin-top: -20px;">
			<view class="header-form">
				<view class="header-li">
					<view class="header-name"><h3>家人姓名</h3></view>
					<textarea  v-model="ruleForm.names"  placeholder="请输入" class="text-area"></textarea>
				</view>
				<view class="header-li">
					<view class="header-name"><h3>家人电话</h3></view>
					<textarea v-model="ruleForm.number" placeholder="请输入" class="text-area"></textarea>
				</view>
				<view class="header-li">
					<view class="header-name"><h3>身份证号码</h3></view>
					<textarea v-model="ruleForm.idcars" placeholder="请输入" class="text-area"></textarea>
				</view>
				<view class="header-li" >
					<view class="header-name"><h3>家人性别</h3></view>
					<picker :value="index" @change="typeBtn" :range="typaBtne" range-key="name" mode="selector">
						<view class="form-select">{{typaBtne[index].name}}</view>
					</picker>
				</view>
				<view class="header-li">
					<view class="header-name"><h3>家人民族</h3></view>
					<textarea v-model="ruleForm.nation"  placeholder="请输入" class="text-area"></textarea>
				</view>
				<view class="header-li">
					<view class="header-name"><h3>出生日期</h3></view>
					<picker mode="date" :value="date" :start="startDate" :end="endDate" @change="bindDateChange">
					    <view class="uni-input">{{date}}</view>
					</picker>
				</view>
			</view>
		</view>
		<view style="margin-top: 50px;padding-bottom: 50px;">
			<button class="yilingqu" @click="submint">确认提交</button>
		</view>
		
	</view>
</template>

<script>
	import {
		pathToBase64,
		base64ToPath
	} from '@/utils/image-tool.js'
	export default {
		data() {
			return {
				type:1,
				index:0,
				index2:0,
				index3:0,
				index4:0,

				array:['分类','分类二'],
				inday:0,
				
				ruleForm:{
					ten_id:null,//租户id
					names:null,//租户名称
					number:null,//租户电话
					idcars:null,//身份证号码
					id_card_positive:null,//身份证正面
					id_card_side:null,//身份证反面
					sexs:null,//性别1.男 2.女
					nation:null,//民族
					birthday:null,//出生日期
				},
				contarctList:[],
				//性别
				typaBtne:[
					{id:0,name:'请选择'},
					{id:1,name:'男'},
					{id:2,name:'女'}
				],
				//性别
				typaBtne2:[
				  {id:0,name:'请选择'},
				  {id:1,name:'卡'},
				  {id:2,name:'数'}
				],
				date: "请选择日期",
			}
		},
		computed: {
			startDate() {
				return this.getDate('start');
			},
			endDate() {
				return this.getDate('end');
			}
		},
		onLoad(options) {
			if(options.id){
				this.ruleForm.ten_id = options.id;
			}
		},
		methods: {
			getDate(type) {
				const date = new Date();
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				let day = date.getDate();

				if (type === 'start') {
					year = year - 60;
				} else if (type === 'end') {
					year = year + 2;
				}
				month = month > 9 ? month : '0' + month;
				day = day > 9 ? day : '0' + day;
				return `${year}-${month}-${day}`;
			},
			//提交按钮
			submint(){
				if(this.ruleForm.sexs==0){
					this.ruleForm.sexs=null;
				}
				if(this.ruleForm.payment_method==0){
					this.ruleForm.payment_method=null;
				}
				if(this.ruleForm.ten_pay_state==0){
					this.ruleForm.ten_pay_state=null;
				}
				if(this.ruleForm.card_status==0){
					this.ruleForm.card_status=null;
				}
				this.ruleForm.rent_contarct = this.contarctList.toString();
				console.log(this.ruleForm)
				this.$request.api.addFamily({
					ten_id:this.ruleForm.ten_id,
					tenant_name:this.ruleForm.names,
					tenant_tell:this.ruleForm.number,
					dentity_card:this.ruleForm.idcars,
					tenant_sex:this.ruleForm.sexs,
					tenant_mz:this.ruleForm.nation,
					born_time:this.ruleForm.birthday
				}).then(response => {
					if(response.data.code === 0){
						//TODO 提示发布成功 跳转
						uni.showToast({
						    title: '新增家人成功！',
						    icon:'success'
						});
						this.$Router.push({
							path: '/pages/rentsale/tenantList'
						})
					}else{
						//TODO 提示发布失败
						uni.showToast({
						    title: '请检查参数或联系管理员！',
						    icon:'error'
						});
					}
				})
			},
			//选择时间
			bindDateChange: function(e) {
				this.date = e.target.value
				this.ruleForm.birthday = this.date
			},
			//选择性别
			typeBtn:function(e){
				this.index = e.target.value,
				this.ruleForm.sexs = this.typaBtne[this.index].id
			},
			//上传身份证正面
			colseImg(val){
					this.ruleForm.id_card_positive = null;
					if(!this.ruleForm.id_card_positive){
						this.imgFlag=true
					}
			},
			// 选择图片
			uoloadHouse() {
				let _this = this;
				uni.showActionSheet({
					itemList: ['手机拍照', '本地图片上传'],
					success: function(res) {
						if (res.tapIndex == 0) {
							uni.chooseImage({
								count: 3, //默认9
								sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
								sourceType: ['camera '],
								success: function(res) {
									pathToBase64(res.tempFilePaths[0]).then(res => {
										_this.$request.api.image({
											imageBase64: res
										}).then(res => {
											_this.ruleForm.id_card_positive = res.data.data
											_this.imgFlag=false;
										})
									})
								}

							})
						} else {
							uni.chooseImage({
								count: 1, //默认9
								sizeType: ['original', 'compressed'],
								sourceType: ['album  '],
								success: function(res) {
									pathToBase64(res.tempFilePaths[0]).then(res => {
										_this.$request.api.image({
											imageBase64: res
										}).then(res => {
											_this.ruleForm.id_card_positive = res.data.data
											_this.imgFlag=false;
										})
									})
								}

							});
						}
					},
					fail: function(res) {}
				});
			},
			//上传身份证反面
			colseImg2(val){
					this.ruleForm.id_card_side = null;
					if(!this.ruleForm.id_card_side){
						this.imgFlag=true
					}
			},
			// 选择图片
			uoloadHouse2() {
				let _this = this;
				uni.showActionSheet({
					itemList: ['手机拍照', '本地图片上传'],
					success: function(res) {
						if (res.tapIndex == 0) {
							uni.chooseImage({
								count: 3, //默认9
								sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
								sourceType: ['camera '],
								success: function(res) {
									pathToBase64(res.tempFilePaths[0]).then(res => {
										_this.$request.api.image({
											imageBase64: res
										}).then(res => {
											_this.ruleForm.id_card_side = res.data.data
											_this.imgFlag=false;
										})
									})
								}

							})
						} else {
							uni.chooseImage({
								count: 1, //默认9
								sizeType: ['original', 'compressed'],
								sourceType: ['album  '],
								success: function(res) {
									pathToBase64(res.tempFilePaths[0]).then(res => {
										_this.$request.api.image({
											imageBase64: res
										}).then(res => {
											_this.ruleForm.id_card_side = res.data.data
											_this.imgFlag=false;
										})
									})
								}

							});
						}
					},
					fail: function(res) {}
				});
			},
		}
	}
</script>


<style lang="scss">
	.repair-wrap {
		width: 100%;
		min-height: 100vh;
		height: auto;
		background: #f4f4f4;
		overflow: hidden;

		.repair-box {
			background: #fff;

			.repair-titel {
				height: 44rpx;
				line-height: 44rpx;

				.repair-titel-l {
					float: left;
				}

				.repair-titel-r {
					float: right;
					color: #999;
				}
			}

			.repair-6 {
				color: #666;
			}
		}
	}
	.tab_nav{
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.tab_nav  .navTitle {
		height: 90rpx;
		line-height: 90rpx;
		width: 100%;
		text-align: center;
		font-size: 32rpx;
		font-family: Alibaba PuHuiTi;
		color: #333;
	}
	.active {
		position: relative;
		color: #F9A832 ;
	}
	.active::after {
		content: "";
		position: absolute;
		width: 100rpx;
		height: 4rpx;
		background-color: #F9A832 ;
		left: 0px;
		right: 0px;
		bottom: 0px;
		margin: auto;
	}
	.button{
		height: 40px;
		line-height: 40px;
		width: 34%;
		border-radius: 33px;
		border: 1px solid #CCCCCC;
	}
	.button1{
		height: 40px;
		line-height: 40px;
		width: 80%;
		border-radius: 33px;
		border: 1px solid #F9A832;
		color: #FFFFFF;
		background-color: #F9A832;
	}
	.button:hover{
		border: 1px solid #F9A832;
		color: #FFFFFF;
		background-color: #F9A832;
	}
	.header-form{
		margin-top: 60rpx;
		background: #FFFFFF;
		.header-li{
			// padding:0 45rpx;
			display: flex;
			// align-items: center;
			font-family: PingFangSC-Medium, PingFang SC;
			font-weight: 500;
			line-height: 95rpx;
			color: #333333;
			border-bottom:1rpx solid #EEEEEE;
			.header-name{
				width: 200rpx;
			}
			.text-area{
        margin-left: 10px;
				width: 420rpx;
				padding-top: 26rpx;
				height: 60rpx;
			}
		}
	}
	.guarn-box {
		width: 100%;
		height: 165px;
	}
	.guarn-box-img {
    width: 87%;
    height: 55%;
		float: left;
		margin-right: 24rpx;
		text-align: center;
		border: 5rpx solid #ccc;
		border-radius: 4rpx;
		margin-left: 72rpx;
		margin-top: 10px
	}
	
	.guarn-box-img image {
		width: 76rpx;
		height: 34px;
	}
	
	.header-li {
		display: flex;
		// align-items: center;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 500;
		line-height: 102rpx;
		color: #333333;
		border-bottom: 1rpx solid #EEEEEE;
	}
	.foot_item{
		margin-top: 40rpx;
		height: 280rpx;
	}
	.button2{
		width: 40%;
		height: 30%;
		float: left;
		margin-left: 33px;
		color: #F9A832;
		border: 1px solid #F9A832;
		background-color: #ffffff;
		border-top-left-radius: 40rpx;
		border-bottom-left-radius: 40rpx;
	}
	.button_in{
		width: 40%;
		height: 31%;
		float: right;
		background-color: #F9A832;
		margin-right: 34px;
		border-top-right-radius: 40rpx;
		border-bottom-right-radius: 40rpx;
	}
	.button_renovation{
		width: 31%;
		font-size: 10px;
		border-radius: 11px;
		border: 1px solid #2986FF;
		background-color: rgb(255, 255, 255);
		margin-right: 249px;
		color: #2986FF;
		margin-top: 20px;
	}
	.footers{
		width: 100%;
		background-color: #FFFFFF;
		height: 72px;
		position:fixed;
		bottom:0px;
		left:0px;
	}
	.footer{
		width: 95%;
		margin: 40rpx 20rpx;
		// position:fixed;
		// bottom:0px;
		// left:0px;
	}
	.footer-btn{
		// display: flex;
		width: 150rpx;
		height: 70rpx;
		line-height: 70rpx;
		margin-left: 300rpx;
		float: right;
		text-align: center;
		background-color: #F9A832;
		border-top-left-radius: 40rpx;
		border-top-right-radius: 40rpx;
		border-bottom-left-radius: 40rpx;
		border-bottom-right-radius: 40rpx;
	}
	.details{
		color: #FFFFFF;
	
	}
	.button5{
		position: relative;
		// left: 264rpx;
		top: -46rpx;
	}
	.payment{
		width: 50px;
		height: 50px;
		border: 1px solid #C0C0C0;
		border-radius: 12px;
	}
	.payment_img{
		width: 35px;
		margin-top: 10px;
		margin-left: 7px;
	}
	.payment:hover{
		border: 1px solid #F9A832;
		 cursor : hand;
	}
	.form-select {
		width: 480rpx;
		background: url(../../static/image/right.png) no-repeat center right;
		background-size: 10rpx 17rpx;
	}
	.header-li1{
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 500;
		color: #333333;
		border-bottom:1rpx solid #EEEEEE;
		margin-top: 20px;
	}
	.borders{
		width: 19%;
		line-height: 35px;
		border-radius: 17px;
		text-align: center;
		border: 1px solid #CCCCCCFF;
		margin-top: 14px;
	}
	.borders:hover{
		width: 19%;
		line-height: 35px;
		border-radius: 17px;
		text-align: center;
		border: 1px solid #FFF9A832;
		background-color: #FFF9A832;
		margin-top: 14px;
	}
	.guarn-box-txt {
		width: 420rpx;
		height: 216rpx;
		color: #999;
		float: left;
	}
	.yilingqu{
		width: 80%;
		height: 84rpx;
		background: linear-gradient(180deg, #76D904 0%, #417505 100%);
		border-radius: 44rpx;
		line-height: 84rpx;
		color: #FFFFFF;
		text-align: center;
		font-size: 32rpx;
	}
	.guarn-box {

	}
	
	.guarn-box2 {
		display: flex;
	}
	
	.guarn-box2-img {
		width: 216rpx;
		height: 216rpx;
		margin-right: 20rpx;
		position: relative;
	
		.guarn-box2-img-close {
			position: absolute;
			top: 20rpx;
			right: 20rpx;
		}
	}
	
	.guarn-box2 image {
		width: 216rpx;
		height: 216rpx;
	}
	
	.guarn-box-img {
    width: 88%;
    height: 60%;
    float: left;
    margin-right: 12px;
    text-align: center;
    border: 1px solid #ccc;
    border-radius: 2px;
	}
	
	.guarn-box-img image {
		width: 76rpx;
		height: 68rpx;
	}
</style>
